{include file="header" title="YunCMS后台管理系统" keywords="" description=""/}
<div class="case-banner">
    <img src="/static/home/yuncms/images/case_bj.jpg"/>
    <span data-am-scrollspy="{animation:'slide-left'}">CASE SHOW</span>
</div>


<div class="case-category">
    <div class="cms-g">
        <ul>
            {notempty name="attrs.anli"}
            {volist name="attrs.anli.values" id="anli" key="k"}
            <li {$anli|get_attr_value|get_select_on=###,$selects,'anli','class="attrs on"'} onclick="select_attr(this);" attr_key="anli" attr_value="{$anli|get_attr_value=###}" ><a href="#">{$anli|get_attr_key=###}</a><input type="hidden" value="{$anli|get_attr_value=###}" id="anli_{$k}" /></li>
            {/volist}
            {/notempty}
        </ul>

    </div>
</div>

<div class="case-list">
    <div class="cms-g">


        {volist name='list' id='lists'}
        <div class="am-u-sm-6 am-u-md-4 am-u-lg-3">
            <div class="case-list-item">
                <a href="{$lists.content_id|get_info_url=###}"><img src="{$lists.cover|get_image_url=###}"/></a>
                <span class="f-toe">{$lists.title}</span>
                <strong class="f-toe">
                    {$lists.seo_key}
                </strong>
            </div>
        </div>
        {/volist}

    </div>
</div>


<div class="page">
    <div class="cms-g">
<!--        <ul class="pagination">
            <li><a href="#">首页</a></li>
            <li class="disabled"><span>上一页</span></li>
            <li class="disabled active"><span>1</span></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">下一页</a></li>
            <li><a href="#">尾页</a></li>
        </ul>-->
        {$page}
    </div>
</div>


{include file="footer" /}

<script type="text/javascript">
    function select_attr(el){
        var cur_key = el.getAttribute('attr_key');
        var cur_val = el.getAttribute('attr_value');
        var attrs = document.getElementsByClassName('attrs');
        var str = '';
        for(var i=0,len=attrs.length;i<len;i++){
            if(jshasClass(attrs[i],'on') == true){
                var attr_key = attrs[i].getAttribute('attr_key');
                var attr_val = attrs[i].getAttribute('attr_value');
                if(attr_key == cur_key){
                    attr_val = cur_val;
                }
                str += '/'+attr_key+'/'+attr_val;
            }
        }
        str +='/category_id/'+{$cid};
        window.location.href = "/home/lists/index"+str;
    }

    function jshasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }
</script>
